﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>编辑自定义样式</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="./Content/jquery-ui.min.css" media="screen">
    <link rel="stylesheet" href="./Content/main.min.css" media="screen">
</head>

<body>
    <div class="editor-main">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="examples">
                        <div class="panel-group" id="accordion2">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive">背景</a>
                                </div>
                                <div id="collapseFive" class="accordion-body collapse in">
                                    <div class="panel-body">
                                        <div>
                                            <div class="input-group">
                                                <span class="input-group-addon">背景色</span>
                                                <input class="form-control jscolor {hash:true,required:false}" id="b-color" type="text" onchange="updateDisplay()" />
                                            </div>
                                            <div class="input-group loading">
                                                <span class="input-group-addon">背景图</span>
                                                <input type="text" class="form-control" data-url="/admin/Media/Select" onchange="updateDisplay()" id="background-image" />
                                                <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-search"></span>
                                                </span>
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">重复模式</span>
                                                <select class="form-control" onchange="updateDisplay()" id="background-repeat">
                                                    <option value=""></option>
                                                    <option value="repeat">重复</option>
                                                    <option value="repeat-x">水平重复</option>
                                                    <option value="repeat-y">垂直重复</option>
                                                    <option value="no-repeat">不重复</option>
                                                </select>
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">位置</span>
                                                <select class="form-control" onchange="updateDisplay()" id="background-position">
                                                    <option value=""></option>
                                                    <option value="left">左对齐</option>
                                                    <option value="right">右对齐</option>
                                                    <option value="top">顶部对齐</option>
                                                    <option value="left top">左上对齐</option>
                                                    <option value="right top">右上对齐</option>
                                                    <option value="left bottom">左下对齐</option>
                                                    <option value="right bottom">右下对齐</option>
                                                    <option value="50% 50%">居中</option>
                                                </select>
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">固定</span>
                                                <select class="form-control" onchange="updateDisplay()" id="background-attachment">
                                                    <option value=""></option>
                                                    <option value="fixed">固定</option>
                                                    <option value="scroll">滚动</option>
                                                </select>
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">自定义</span>
                                                <input type="text" class="form-control" placeholder="#ddd" onchange="updateDisplay()" id="background" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">边距</a>
                                </div>
                                <div id="collapseTwo" class="accordion-body collapse">
                                    <div class="panel-body">
                                        <div>
                                            <p>
                                                <label for="padding">内边距:</label>
                                                <strong class="text-info"><span id="padding">0</span>px</strong>
                                            </p>
                                            <div id="slider_padding" class="slider padding">
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">自定义</span>
                                                <input type="text" class="form-control" placeholder="0 auto" id="padding-custom" onchange="updateDisplay()" />
                                            </div>
                                            <p>
                                                <label for="margin">外边距:</label>
                                                <strong class="text-info"><span id="margin">0</span>px</strong>
                                            </p>
                                            <div id="slider_margin" class="slider padding">
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">自定义</span>
                                                <input type="text" class="form-control" placeholder="0 auto" id="margin-custom" onchange="updateDisplay()" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseSize">宽 / 高</a>
                                </div>
                                <div id="collapseSize" class="accordion-body collapse">
                                    <div class="panel-body">
                                        <div>
                                            <div class="input-group">
                                                <span class="input-group-addon">宽(px)</span>
                                                <input class="form-control" id="width" type="text" placeholder="50" onchange="updateDisplay()" />
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">高(px)</span>
                                                <input type="text" class="form-control" placeholder="50" onchange="updateDisplay()" id="height" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">边框</a>
                                </div>
                                <div id="collapseOne" class="accordion-body collapse">
                                    <div class="panel-body">
                                        <div>
                                            <p>
                                                <label for="border-width">边框大小:</label>
                                                <strong class="text-info"><span id="border-width">0</span>px</strong>
                                            </p>
                                            <div id="slider_border-width" class="slider border">
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">边框颜色</span>
                                                <input class="form-control jscolor {hash:true}" id="bc-color" value="#6D6D6D" type="text" onchange="updateDisplay()" />
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">边框样式</span>
                                                <select class="form-control" onchange="updateDisplay()" id="border-style">
                                                    <option value="solid">实线</option>
                                                    <option value="dashed">虚线</option>
                                                    <option value="dotted">点划线</option>
                                                    <option value="double">双线</option>
                                                    <option value="groove">凹槽</option>
                                                    <option value="inset">内嵌</option>
                                                    <option value="outset">外嵌</option>
                                                    <option value="ridge">屋脊</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">文本</a>
                                </div>
                                <div id="collapseFour" class="accordion-body collapse">
                                    <div class="panel-body">
                                        <div>
                                            <div class="input-group">
                                                <span class="input-group-addon">文本颜色</span>
                                                <input class="form-control jscolor {hash:true,required:false}" id="t-color" type="text" onchange="updateDisplay()" />
                                            </div>

                                            <div class="input-group">
                                                <span class="input-group-addon">对齐</span>
                                                <select class="form-control" onchange="updateDisplay()" id="text-align">
                                                    <option value=""></option>
                                                    <option value="left">左对齐</option>
                                                    <option value="right">右对齐</option>
                                                    <option value="center">居中</option>
                                                    <option value="justify">两端对齐</option>
                                                </select>
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">修饰</span>
                                                <select class="form-control" onchange="updateDisplay()" id="text-decoration">
                                                    <option value=""></option>
                                                    <option value="none">无</option>
                                                    <option value="underline">底线</option>
                                                    <option value="overline">顶线</option>
                                                    <option value="underline overline">上下线</option>
                                                    <option value="line-through">中线</option>
                                                    <option value="blink">闪烁</option>
                                                </select>
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">大小写</span>
                                                <select class="form-control" onchange="updateDisplay()" id="text-transform">
                                                    <option value=""></option>
                                                    <option value="none">无</option>
                                                    <option value="capitalize">首字母大写</option>
                                                    <option value="lowercase">小写</option>
                                                    <option value="uppercase">大写</option>
                                                </select>
                                            </div>
                                            <p>
                                                <label for="text-indent">缩进:</label>
                                                <strong class="text-info"><span id="text-indent">0</span>px</strong>
                                            </p>
                                            <div id="slider_text-indent" class="slider fontsize">
                                            </div>
                                            <p>
                                                <label for="letter-spacing">间距:</label>
                                                <strong class="text-info"><span id="letter-spacing">0</span>px</strong>
                                            </p>
                                            <div id="slider_letter-spacing" class="slider border">
                                            </div>
                                            <p>
                                                <label for="word-spacing">字间距:</label>
                                                <strong class="text-info"><span id="word-spacing">0</span>px</strong>
                                            </p>
                                            <div id="slider_word-spacing" class="slider border">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">字体</a>
                                </div>
                                <div id="collapseThree" class="accordion-body collapse">
                                    <div class="panel-body">
                                        <div>
                                            <div class="input-group">
                                                <span class="input-group-addon">字体</span>
                                                <select class="form-control" onchange="updateDisplay()" id="font-name">
                                                    <option value=""></option>
                                                    <option value="arial">Arial</option>
                                                    <option value="'arial black'">Arial Black</option>
                                                    <option value="'comic sans ms'">Comic Sans MS</option>
                                                    <option value="'courier new'">Courier New</option>
                                                    <option value="georgia">Georgia</option>
                                                    <option value="helvetica">Helvetica</option>
                                                    <option value="impact">Impact</option>
                                                    <option value="'times new roman'">Times New Roman</option>
                                                    <option value="'trebuchet ms'">Trebuchet MS</option>
                                                    <option value="verdana">Verdana</option>
                                                </select>
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">样式</span>
                                                <select class="form-control" onchange="updateDisplay()" id="font-style">
                                                    <option value=""></option>
                                                    <option value="normal">正常</option>
                                                    <option value="italic">斜体</option>
                                                    <option value="oblique">倾斜</option>
                                                </select>
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">加粗</span>
                                                <select class="form-control" onchange="updateDisplay()" id="font-weight">
                                                    <option value=""></option>
                                                    <option value="normal">正常</option>
                                                    <option value="bold">粗体</option>
                                                    <option value="bolder">特粗体</option>
                                                    <option value="lighter">轻加粗</option>
                                                </select>
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">小型大写字母</span>
                                                <select class="form-control" onchange="updateDisplay()" id="font-variant">
                                                    <option value=""></option>
                                                    <option value="normal">正常</option>
                                                    <option value="small-caps">小型</option>
                                                </select>
                                            </div>
                                            <p>
                                                <label for="font-size">大小:</label>
                                                <strong class="text-info"><span id="font-size">0</span>px</strong>
                                            </p>
                                            <div id="slider_font-size" class="slider fontsize">
                                            </div>
                                            <p>
                                                <label for="line-height">行高:</label>
                                                <strong class="text-info"><span id="line-height">0</span>px</strong>
                                            </p>
                                            <div id="slider_line-height" class="slider padding">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseSix">定位</a>
                                </div>
                                <div id="collapseSix" class="accordion-body collapse">
                                    <div class="panel-body">
                                        <div>
                                            <div class="input-group">
                                                <span class="input-group-addon">定位</span>
                                                <select class="form-control" onchange="updateDisplay()" id="position">
                                                    <option value=""></option>
                                                    <option value="static">静止</option>
                                                    <option value="relative">相对</option>
                                                    <option value="absolute">绝对</option>
                                                    <option value="fixed">固定</option>
                                                </select>
                                            </div>
                                            <p>
                                                <label for="top">顶部距离:</label>
                                                <strong class="text-info"><span id="top">0</span>px</strong>
                                            </p>
                                            <div id="slider_top" class="slider position">
                                            </div>
                                            <p>
                                                <label for="left">左边距离:</label>
                                                <strong class="text-info"><span id="left">0</span>px</strong>

                                            </p>
                                            <div id="slider_left" class="slider position">
                                            </div>
                                            <p>
                                                <label for="right">右边距离:</label>
                                                <strong class="text-info"><span id="right">0</span>px</strong>
                                            </p>
                                            <div id="slider_right" class="slider position">
                                            </div>
                                            <p>
                                                <label for="bottom">底部距离:</label>
                                                <strong class="text-info"><span id="bottom">0</span>px</strong>
                                            </p>
                                            <div id="slider_bottom" class="slider position">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseEight">阴影 / 圆角</a>
                                </div>
                                <div id="collapseEight" class="accordion-body collapse">
                                    <div class="panel-body">
                                        <div>
                                            <h3>圆角</h3>
                                            <p>
                                                <label for="border-radius">大小:</label>
                                                <strong class="text-info"><span id="border-radius">0</span>px</strong>
                                            </p>
                                            <div id="slider_border-radius" class="slider padding">
                                            </div>
                                            <h3>文字阴影</h3>
                                            <p>
                                                <label for="text-h-length">水平大小:</label>
                                                <strong class="text-info"><span id="text-h-length">0</span>px</strong>
                                            </p>
                                            <div id="slider_text-h-length" class="slider border">
                                            </div>
                                            <p>
                                                <label for="text-v-length">垂直大小:</label>
                                                <strong class="text-info"><span id="text-v-length">0</span>px</strong>
                                            </p>
                                            <div id="slider_text-v-length" class="slider border">
                                            </div>
                                            <p>
                                                <label for="text-b-length">模糊:</label>
                                                <strong class="text-info"><span id="text-b-length">0</span>px</strong>
                                            </p>
                                            <div id="slider_text-b-length" class="slider border">
                                            </div>

                                            <div class="input-group">
                                                <span class="input-group-addon">颜色</span>
                                                <input class="form-control jscolor {pickerPosition:'top',hash:true}" id="text-s-color" value="#000000" type="text" onchange="updateDisplay()" />
                                            </div>
                                            <h3>阴影</h3>
                                            <p>
                                                <label for="box-h-length">水平大小:</label>
                                                <strong class="text-info"><span id="box-h-length">0</span>px</strong>
                                            </p>
                                            <div id="slider_box-h-length" class="slider border">
                                            </div>
                                            <p>
                                                <label for="box-v-length">垂直大小:</label>
                                                <strong class="text-info"><span id="box-v-length">0</span>px</strong>
                                            </p>
                                            <div id="slider_box-v-length" class="slider border">
                                            </div>
                                            <p>
                                                <label for="box-b-length">模糊:</label>
                                                <strong class="text-info"><span id="box-b-length">0</span>px</strong>
                                            </p>
                                            <div id="slider_box-b-length" class="slider border">
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">颜色</span>
                                                <input class="form-control jscolor {pickerPosition:'top',hash:true}" id="box-s-color" value="#000000" type="text" onchange="updateDisplay()" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseSeven">其它</a>
                                </div>
                                <div id="collapseSeven" class="accordion-body collapse">
                                    <div class="panel-body">
                                        <div>
                                            <div class="input-group">
                                                <span class="input-group-addon">鼠标</span>
                                                <select class="form-control" onchange="updateDisplay()" id="cursor">
                                                    <option value=""></option>
                                                    <option value="crosshair">十字</option>
                                                    <option value="default">指针</option>
                                                    <option value="pointer">手形</option>
                                                    <option value="move">移动</option>
                                                    <option value="text">光标</option>
                                                    <option value="wait">等待</option>
                                                    <option value="help">帮助</option>
                                                    <option value="n-resize">向上改变大小</option>
                                                    <option value="s-resize">向下改变大小</option>
                                                    <option value="w-resize">向左改变大小</option>
                                                    <option value="e-resize">向右改变大小</option>
                                                    <option value="ne-resize">向右上改变大小</option>
                                                    <option value="nw-resize">向左上改变大小</option>
                                                    <option value="se-resize">向右下改变大小</option>
                                                    <option value="sw-resize">向左下改变大小</option>
                                                </select>
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">可见性</span>
                                                <select class="form-control" onchange="updateDisplay()" id="visibility">
                                                    <option value=""></option>
                                                    <option value="visible">可见</option>
                                                    <option value="hidden">隐藏</option>
                                                </select>
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">超出可见性</span>
                                                <select class="form-control" onchange="updateDisplay()" id="overflow">
                                                    <option value=""></option>
                                                    <option value="visible">可见</option>
                                                    <option value="hidden">隐藏</option>
                                                    <option value="scroll">滚动</option>
                                                    <option value="auto">自动</option>
                                                </select>
                                            </div>
                                            <div class="input-group">
                                                <span class="input-group-addon">浮动</span>
                                                <select class="form-control" onchange="updateDisplay()" id="float">
                                                    <option value=""></option>
                                                    <option value="left">左浮动</option>
                                                    <option value="right">右浮动</option>
                                                    <option value="none">无</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="style-preview">
                    <div class="examples">
                        <div class="panel panel-default">
                            <div class="panel-heading clearfix">
                                <div class="pull-left">
                                    <span class="badge">预览</span>
                                </div>
                                <div class="pull-right">
                                    <input href="javascript:void(0)" class="btn btn-danger btn-xs reset" value="重置" type="button" />
                                </div>
                            </div>
                            <div style="background: url('./Content/grid.gif'); padding: 10px;">
                                <div id="CSS-Display">
                                    <div>
                                        传统的建站，网站所有区域的内容都是固定的，不可改变的，不能够随心所欲的改变页面的结构，布局。而使用ZKEACMS，您可以对网页进行任意的区域划分，每个区域都可随意添加内容。
                                        <br /> 您还可以向布局中添加共用的内容，这样所有应用这个布局的页面都会有相同的内容，而不用重复制添加。
                                    </div>
                                </div>
                            </div>
                            <div class="panel-footer">
                                <pre id="output" class="prettyprint lang-css prettyprinted">
									
								</pre>
                            </div>
                        </div>
                    </div>

                    <div class="examples">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdn.bootcss.com/jscolor/2.0.4/jscolor.min.js"></script>
    <script type="text/javascript" src="./Content/jquery-ui.custom.min.js"></script>
    <script type="text/javascript" src="./Content/editor.min.js"></script>
    <script type="text/javascript" src="./Content/values.min.js"></script>
</body>

</html>